﻿<template>
	<div>
		<el-form ref="form" v-bind="getFormProps()" label-height="129px" :rules="rules">
			<div class="content-message">
				<!--企业资料部分-->
				<div class="company">
					<e-heading>企业资料</e-heading>
					<el-form-item label="公司名称：" 
                prop="companyName" 
                :rules="[
										{ required: true, message: '公司名称不能为空'},
                    { min: 4, max: 50, message: '公司名称长度为4-50个字符', trigger: 'blur'}
										]">
						<el-input class="normal-input" v-model.trim="form.companyName" placeholder="请填写营业执照上的公司全称" @blur="handleCompany"></el-input>
					</el-form-item>
					<el-form-item label="公司类型：" 
                prop="companyType" 
                :rules="[
										{ required: true, message: '公司类型不能为空'},
									]">
						<el-select v-model="form.companyType" placeholder="请选择公司类型">
							<el-option v-for="item in organize_Company_list.dicts" :key="item.id" :label="item.title" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="公司注册地址：" 
                prop="companyAddress" 
                :rules="[
										{ required: true, message: '公司注册地址不能为空'},
                    { min: 5, max: 120, message: '公司注册地址长度为5-120个字符', trigger: 'blur'}
									]">
						<el-input class="normal-input" v-model="form.companyAddress" placeholder="请填写营业执照上的公司地址"></el-input>
					</el-form-item>
					<el-form-item label="公司联系地址：" 
                prop="address" 
                :rules="[
										{ required: true, message: '公司联系地址不能为空'},
								  ]">
						<e-address-cascader v-model="form.address" :grade="3"/>
					</el-form-item>
					<el-form-item 
                prop="detailAddress" 
                :rules="[
										{required: true, message: '详细地址不能为空'},
                    {min: 5, max: 120, message: '公司联系地址长度为5-120个字符', trigger: 'blur'}
									]">
						<el-input class="normal-input" v-model.trim="form.detailAddress" placeholder="详细地址 "></el-input>
					</el-form-item>
					<el-form-item label="组织机构代码证： " 
                prop="codeUrl" 
                :rules="[ 
										{ required: true, message: '请上传组织机构代码证'}
									]">
						<e-img-upload :size="1024*1024*2" v-model="form.codeUrl" class="logo-upload"></e-img-upload>
						<span class="tip">若三证合一(营业执照、组织机构代码证、税务登记证)，请您在相应的位置均提交营业执照。
							<br>图片格式为png或者jpg，彩色无水印，大小2M以内</span>
					</el-form-item>
					<el-form-item label="企业公司营业执照事业单位法人证书： " 
                prop="certificateUrl" 
                :rules="[ 
									  { required: true, message: '请上传事业单位法人证书'}, 
									] ">
						<e-img-upload :size="1024*1024*2" v-model="form.certificateUrl" class="logo-upload"></e-img-upload>
						<span class="tip">若三证合一(营业执照、组织机构代码证、税务登记证)，请您在相应的位置均提交营业执照。
							<br>图片格式为png或者jpg，彩色无水印，大小2M以内</span>
					</el-form-item>
				</div>

				<!--分割线-->
				<div class="divider"></div>

				<!--运营负责人部分-->
				<div class="operate ">
					<e-heading grade="1 ">运营负责人</e-heading>
					<span class="operate-state">( 在为你审核或者提供服务的过程中，如果遇到任何问题，我们将联系运营负责人。)</span>
					<el-form-item label="负责人姓名：" 
                prop="contact" :rules="[ 
                    { required: true, message: '负责人姓名不能为空'},
                    { min: 2, max: 25, message: '负责人姓名长度2-25个字符', trigger: 'blur'}
                  ]">
						<el-input class="normal-input" v-model.trim="form.contact" placeholder="请输入负责人姓名"></el-input>
					</el-form-item>
					<el-form-item label="负责人手机号：" prop="phone">
						<el-input class="normal-input" v-model="form.phone" placeholder="请输入负责人手机号"></el-input>
					</el-form-item>
					<el-form-item label="手机验证码：" 
                prop="vertifyCode" >
            <e-sms-code inline :params="{account: form.phone, type:7}" v-model="form.vertifyCode" :btn-disabled="!phoneSuccess"/>
					</el-form-item>
				</div>
				<!--分割线-->
				<div class="divider"></div>
			</div>
			<div class="btn-list">
				<router-link :to="{path: '/organize/type', query: {activeId: this.$route.params.activeId}}">
					<el-button class="btn-organize">上一步</el-button>
				</router-link>
				<el-button class="btn-organize" type="primary" native-type="submit" :disabled="form.phone&&form.vertifyCode ? false : true">提交信息</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import EAddressCascader from '@e-ui/AddressCascader'
import EImgUpload from '@e-ui/ImgUpload'
import ESmsCode from '@e-ui/SmsCode'
import validator from 'utils/validator'
import api from 'api/organize'
import {form} from 'utils/mixins'
export default {
  mixins: [form],
  components: {
    EAddressCascader,
    EImgUpload,
    ESmsCode
  },
  props: {
    activeChange: {
      type: Function
    }
  },
  data () {
    let self = this
    return {
      validator,
      form: {
        codeUrl: '', // 组织代码认证
        certificateUrl: '', // 企业单位法人证书
        companyName: '', // 公司名称
        companyType: '', // 公司类型
        companyAddress: '', // 公司注册地址
        address: [], // 公司联系地址
        detailAddress: '', // 公司详细地址
        area: [], // 省市区
        contact: '', // 负责人名字
        phone: '', // 负责人电话
        vertifyCode: '' // 手机验证码
      },
      loading: false,
      verifyLength: false,
      phoneSuccess: false,
      rules: {
        phone: [
          {
            validator (rule, value, callback) {
              self.phoneSuccess = false
              if (!value.trim()) {
                callback(new Error('负责人手机号不能为空'))
              } else if (!validator.pattern.mobile.test(value.trim())) {
                callback(new Error('负责人手机号不正确'))
              } else {
                self.phoneSuccess = true
                callback()
              }
            }
          }
        ],
        vertifyCode: [
          {
            validator (rule, value, callback) {
              if (!value.trim()) {
                callback(new Error('验证码不能为空'))
              } else {
                api.code({type: 7, validateCode: self.form.vertifyCode, account: self.form.phone}).then((res) => {
                  if (res.data) {
                    callback()
                  } else {
                    callback(new Error('验证码错误，请重新输入'))
                  }
                }).catch(() => {
                  callback(new Error('验证码错误，请重新输入'))
                })
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      organize_Company_list: 'organize_Company_list',
      organize_code: 'organize_code'
    }),
    ...mapActions({
      update_url: 'update_url'
    })
  },
  created () {
    this.activeChange(4)
    this.$store.dispatch('organize_Company_list')
    this.$store.dispatch({type: 'update_url', params: 'true'}) // actions传参
    window.scrollTop = document.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  methods: {
    handleCompany () {
      api.companyName({ // 验证公司名称
        companyName: this.form.companyName
      }, {context: this, successMsg: 'none'}).then(res => {
        // console.log(res)
      })
    },
    handleCode (content) {
      if (content && content.length === 6) {
        this.$store.dispatch('organize_code', {type: 7, validateCode: this.form.vertifyCode, account: this.form.phone}) // 验证手机验证码
        this.verifyLength = false
      }
    },
    submit () {
      if (this.form.vertifyCode.length !== 6) {
        this.verifyLength = true
        return false
      }
      this.$confirm('请确定信息提交无误，提交后将无法修改信息。认证成为组织后，将自动解除与其他组织的关系。', '温馨提示', { // 弹框提示
        type: 'warning'
      }).then(() => {
        api.identify({ // 组织认证
          authCateId: this.$route.params.activeId,
          personName: this.form.contact,
          phone: this.form.phone,
          companyName: this.form.companyName,
          companyType: this.form.companyType,
          companyRegisteredAddr: this.form.companyAddress,
          companyContactAddr: this.form.detailAddress,
          companyProvinceId: this.form.address[0],
          companyCityId: this.form.address[1],
          companyCountyId: this.form.address[2],
          businessLicenseUrl: this.form.certificateUrl,
          orgCertificateUrl: this.form.codeUrl
        }, {
          context: this,
          successMsg: '提交成功!'
        }).then(res => {
          this.$router.push('/organize/commit') // 提交成功跳转
        })
      })
    }
  }
}
</script>
<!--改变公共样式-->
<style>
.el-form-item.is-required .el-form-item__label::before {
	content: '';
}
</style>
<!--私有样式-->
<style scoped>
.heading-1 {
	margin: 50px 0;
	display: inline-block;
}

.operate-state {
	color: #999;
	font-size: 12px;
}

.content-message {
	margin-left: 60px;
}

.fl {
	float: left;
}

.el-form-item__content>.el-cascader,
.el-form-item__content>.el-select {
	width: 324px;
}

.normal-input {
	width: 324px;
}

.size {
	width: 174px;
}

.sencode {
	cursor: pointer;
	width: 134px;
	height: 40px;
  display: inline-block;
  margin-left: 20px
}

.tip {
	display: inline-block;
	color: #999;
	font-size: 12px;
	white-space: normal;
	width: 500px;
	line-height: 20px;
	margin-top: 5px;
	margin-bottom: 0px;
}

.img-upload {
	display: block;
}

.logo-upload {
	width: 160px;
	height: 90px;
}

.el-form-item {
	margin-bottom: 50px;
}

.btn-list {
	height: 80px;
	margin: 50px 0;
	text-align: center;
}

.error {
  color: #ff4949;
  font-size: 12px;
  line-height: 1;
}
</style>
